<template>  
	<view :class="{ line: line, weight: weight }"  
		:style="{ color: color, fontFamily: SemiBold ? 'SemiBold' : 'Regular' }"  
		class="base-money">  
		<text v-show="preFix" class="preFix" :style="{'font-size': preFixSize + 'rpx', 'color': textColor}">{{ preFix }}</text>  
		<text class="symbol" :style="{'font-size': symbolSize + 'rpx'}">￥</text>  
		<text class="integer" :style="{'font-size': integerSize + 'rpx'}">{{ integer }}</text>  
		<text v-if="showDigits" class="decimal" :style="{'font-size': decimalSize + 'rpx'}">.{{ decimal }}</text>  
	</view>  
</template>  

<script>  
	export default {  
		name: 'BaseMoney',  
		props: {  
			digits: {
				type: Number,  
				default: 2,
			},  
			money: {
				type: [String, Number],
				default: "",
			},  
			line: {  
				type: Boolean,  
				default: false,  
			},  
			weight: {  
				type: Boolean,  
				default: false,  
			},  
			color: {  
				type: String,  
				default: 'var(--view-theme)',  
			},  
			textColor: {  
				type: String,  
				default: '#999',  
			},  
			symbolSize: {  
				type: String,  
				default: '20',  
			},  
			integerSize: {  
				type: String,  
				default: '26',  
			},  
			decimalSize: {  
				type: String,  
				default: '24',  
			},  
			inline: {  
				type: Boolean,  
				default: false,  
			},  
			preFix: {  
				type: String,  
				default: '',  
			},  
			preFixSize: {  
				type: String,  
				default: '24',  
			},  
			SemiBold: {  
				type: Boolean,  
				default: true,  
			},  
			isCoupon: {  
				type: Boolean,  
				default: false,  
			},  
		},  
		data() {  
			return {  
				integer: 0,  
				decimal: '',  
				showDigits: false,  
			};  
		},  
		watch: {  
			money: {  
				handler(newValue) {  
					let value = Number(newValue).toFixed(this.digits); // 保留指定的小数位数  
					let parts = value.split('.'); // 拆分整数和小数部分  
					this.integer = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ','); // 格式化千位分隔符  

					if (parts[1]) {  
						this.decimal = parts[1]; // 获取小数部分  
						// 处理小数部分逻辑，确保只有在需要时才显示  
						if (this.decimal === '00') {  
							this.showDigits = false; // 小数部分是00时不显示  
						} else if (this.decimal.endsWith('0')) {  
							this.decimal = this.decimal.slice(0, -1); // 如果小数部分以0结束，去掉最后一个0  
							this.showDigits = this.decimal.length > 0; // 只显示有效小数部分  
						} else {  
							this.showDigits = true; // 显示完整的小数部分  
						}  
					} else {  
						this.showDigits = false; // 没有小数部分时不显示  
					}  
				},  
				immediate: true, // 立即执行以便初始渲染  
			},  
		},  
	};  
</script>  

<style lang="scss" scoped>  
	.base-money {  
		display: inline-block;  
		&.line {  
			text-decoration: line-through; // 删除线效果  
		}  

		&.weight {  
			font-weight: 500; // 粗体  
		}  
	}  
	.preFix {  
		font-weight: 500 !important;  
		font-family: PingFang SC-Medium, PingFang SC !important; // 设置前缀字体  
	}  
	.SemiBold {  
		font-family: 'SemiBold';  
	}  
	.Regular {  
		font-family: 'Regular';  
	}  
</style>